<template>
  <div>
    <div id="header">
      <van-image
          round
          lazy-load
          width="3rem"
          height="3rem"
          src="https://liaowei2002.oss-cn-chengdu.aliyuncs.com/img/jikun.jpg"
          style="margin-left: 20px;margin-top: -10px"
      >
        <template v-slot:loading>
          <van-loading type="spinner" size="20"/>
        </template>
      </van-image>
      <span class="username" v-if="user.username">{{ user.username }}</span>
      <span class="username" v-else>临时用户请先登录</span>
      <span id="mbti">{{ user.personalityName }}</span>
      <van-icon id="editUserInfoBtn" @click="showUserInfoForEdit" name="arrow"/>
    </div>

    <div id="content">
      <van-cell-group inset title="个人信息">
        <van-cell title="年龄" value="练习时长两年半"/>
        <van-cell title="性别" :value="user.gender"/>
        <van-cell title="爱好" :value="user.hobby"/>
        <van-cell title="专业" :value="user.majorName"/>
        <van-cell title="地区" :value="user.regionName"/>
        <van-cell title="期望学科" :value="user.expectDepartmentName"/>
      </van-cell-group>
      <van-cell-group inset title="测试人格">
        <van-cell v-if="user.personalityName === ''" title="还未测试"/>
        <van-cell v-else title="MBTI" :value="user.personalityName"/>
      </van-cell-group>
    </div>

    <div id="footer">
      <van-button @click="logoutBtn" color="linear-gradient(to right, #ff6034, #ee0a24)">
        安全退出
      </van-button>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Footer from "@/components/Footer";

export default {
  name: "Mine",
  components: {Footer},
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  methods: {
    //退出按钮
    logoutBtn() {
      this.request.get('/api/user/logout',{
        params: {
          id: this.user.id
        }
      }).then(res => {
        if (res.code === 1) {
          //清除缓存
          localStorage.removeItem("user");
          localStorage.removeItem("proDepartmentList");
          localStorage.removeItem("acaDepartmentList");
          this.$store.commit('HOTNULL',[])
          //路由到登录页面
          this.$router.push("/login")
          //弹出提示信息
          this.$notify({
            type: 'success',
            message: res.data
          })
        } else {
          this.$notify({
            type: 'danger',
            message: '退出失败'
          })
        }
      })
    },
    //回显用户数据
    showUserInfoForEdit(){
      //路由到修改用户的界面
      this.$router.push(`/edit?id=${this.user.id}`)
    }

  }
}
</script>

<style scoped>
#header {
  width: 100%;
  height: 50px;
  background-color: deepskyblue;
  margin-top: 20px;
}

.username {
  position: absolute;
  top: 30px;
  color: #fff;
}

#editUserInfoBtn {
  border: 1px solid #fff;
  border-radius: 10px;
  background-color: #fff;
  position: absolute;
  right: 5px;
  top: 35px;
}

#footer {
  text-align: center;
}
</style>